<script src="./vue.js"></script>
<link rel="stylesheet" href="/张旭/0420/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="vue-resource-develop/dist/vue-resource.js"></script>

<div id="app">
    <!-- 查询区域 -->
    <div id="select">
        <label>角色名称</label>
        <input type="text" id="cord" v-model="cord"/>
        <button value="查询" @click="sel">查询</button>
    </div>
    <!-- 功能区域 -->
    <div id="opter">
        <button value="新增" @click="add">新增</button>

    </div>
    <!-- 列表区域 -->
    <table class="table table-bordered table-hover table-striped" border="1">
        <thead>
            <tr>
                <td>角色主键</td>
                <td>角色名称</td>
                <td>创建日期</td>
                <td>当前状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in roleList" :key="item.cord">
                <td>{{item.cord}}</td>
                <td>{{item.roleName}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.stud}}</td>
                <td><button @click='del'>删除</button></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    var vu = new Vue({
        el: '#app',
        data: {
            roleList: [
                { cord: "2003021", "roleName": "管理员", createTime: "2023-4-20", stud: "可用" },
                { cord: "2003022", "roleName": "超级管理员", createTime: "2023-4-20", stud: "可用" },
                { cord: "2003023", "roleName": "用户", createTime: "2023-4-20", stud: "不可用" },
            ],
            cord: ""
        },
        //vue 对象创建完成后，，界面加载
        created() {
            this.getAllRole()
        },
        methods: {
            //列表数据绑定
            getAllRole() {
                console.log("获取全部角色信息并绑定列表");
                this.$http.get("role.json").then(rs => {
                    // 当加载json数据时，
                    console.log(rs.body);
                    this.roleList = rs.body
                })
            },
            add() {
                this.roleList.push({"cord":"无","roleName":"无","createTime":"无","stud":"无"})

                
            },
            sel() {

            },
            del() {
                this.roleList.pop()
            }
        }
    })
</script>

<style>

</style>